<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@page import="com.kcs.common.utils.commonUtils"%>
<%@page import="com.kcs.common.utils.PropsUtils"%>
<%@page import="com.kcs.common.utils.Constant"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Deposit/Withdraw FX Margin A/C</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>   
<script type="text/javascript" src="jsp/script/jsDatePick.full.1.3.js"></script>   	
<script type="text/javascript" src="jsp/script/common.js"></script>  
<link rel="stylesheet" type="text/css" href="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/table.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/jsDatePick_ltr.css" />
<link rel="stylesheet" type="text/css" href="jsp/css/fxmarginStyle.css"/>
<script type="text/javascript">

	var g_data;
	var g_reset_case;
	
	$(document).ready(function() {
		
		jQuery("#action").val("init");
	
		new JsDatePick({
			useMode:2,
			target:"transDate",
			dateFormat:"%d/%m/%Y"
		});
	
		new JsDatePick({
			useMode:2,
			target:"valueDate",
			dateFormat:"%d/%m/%Y"
		});

		setMarginAccNoFormat("cTfMarginAccNo","marginAccNo");

	});
	
	function saveFunction(){
		updateMarginAccNoValue("tfMarginAccNo","marginAccNo");
		
		var id 				= jQuery("#id").val();
		var cifNo 			= jQuery("#cifNo").val();
		var custInfoId		= jQuery("#custInfoId").val();
		var customerName 	= jQuery("#customerName").val();
		var marginAccNo 	= jQuery("#marginAccNo").val();
		var marginAccName 	= jQuery("#marginAccName").val();
		var transactionDate = jQuery("#transactionDate").val();
		var valueDate		= jQuery("#valueDate").val();
		var amount 			= jQuery("#amount").val();
		var referanceNo 	= jQuery("#referanceNo").val();
		var updateBy 		= jQuery("#updateBy").val();
		var rowVersion 		= jQuery("#rowVersion").val();
		var depositWithdraw = jQuery("[name=depositWithdraw]:checked").val();

		if(validate()){
			loading();
			jQuery.post("/FxMargin/DepositWithdrawServlet",{
				"id"				: id,
				"cifNo"				: cifNo,
				"custInfoId"		: custInfoId,
				"customerName"		: customerName,
				"marginAccNo"		: marginAccNo,
				"marginAccName"		: marginAccName,
				"transactionDate"	: transactionDate,
				"valueDate"			: valueDate,
				"amount"			: removeCommas(amount),
				"referanceNo"		: referanceNo,
				"updateBy"	  		: updateBy,
				"depositWithdraw"	: depositWithdraw,
				"rowVersion"		: rowVersion,
				"action"			: "insert"
				},
				function(data){
					if(data != null && data.data == "s"){
						unloading();
						alert(m_save_success);
						search();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
					} else{
						unloading();
						alert(m_save_fail);
					}
					$.fancybox.close();
					},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);
		}
		
	}
	
	function updateFunction(){
		updateMarginAccNoValue("tfMarginAccNo","marginAccNo");
		
		var id 				= jQuery("#id").val();
		var cifNo 			= jQuery("#cifNo").val();
		var custInfoId		= jQuery("#custInfoId").val();
		var customerName 	= jQuery("#customerName").val();
		var marginAccNo 	= jQuery("#marginAccNo").val();
		var marginAccName 	= jQuery("#marginAccName").val();
		var transactionDate = jQuery("#transactionDate").val();
		var valueDate		= jQuery("#valueDate").val();
		var amount 			= jQuery("#amount").val();
		var referanceNo 	= jQuery("#referanceNo").val();
		var updateBy 		= jQuery("#updateBy").val();
		var rowVersion 		= jQuery("#rowVersion").val();
		var depositWithdraw = jQuery("[name=depositWithdraw]:checked").val();

		if(validate()){
			loading();
			jQuery.post("/FxMargin/DepositWithdrawServlet",{
				"id"				: id,
				"cifNo"				: cifNo,
				"custInfoId"		: custInfoId,
				"customerName"		: customerName,
				"marginAccNo"		: marginAccNo,
				"marginAccName"		: marginAccName,
				"transactionDate"	: transactionDate,
				"valueDate"			: valueDate,
				"amount"			: removeCommas(amount),
				"referanceNo"		: referanceNo,
				"updateBy"	  		: updateBy,
				"depositWithdraw"	: depositWithdraw,
				"rowVersion"		: rowVersion,
				"action"			: "update"
				},
				function(data){
					if(data != null && data.data == "s"){
						unloading();
						alert(m_save_success);
						search();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
					} else{
						unloading();
						alert(m_save_fail);
					}
					$.fancybox.close();
				},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);
		}
		
	}
	
	function validate(){
	
		var cifNo 			= jQuery("#cifNo").val();
		var customerName 	= jQuery("#customerName").val();
		var marginAccNo 	= jQuery("#marginAccNo").val();
		var marginAccName 	= jQuery("#marginAccName").val();
		var transactionDate = jQuery("#transactionDate").val();
		var valueDate		= jQuery("#valueDate").val();
		var amount 			= jQuery("#amount").val();
		var referanceNo 	= jQuery("#referanceNo").val();
		
		if(cifNo == "") 			{ alert(m_please_fill_data + "  CIF No."); 			return false;}
		if(customerName == "") 		{ alert(m_please_fill_data + "  Customer Name"); 	return false;}
		if(marginAccNo == "")  		{ alert(m_please_fill_data + "  Margin A/C No");   	return false;}
		if(marginAccName == "") 	{ alert(m_please_fill_data + "  Margin A/C Name"); 	return false;}
		if(transactionDate == "")   { alert(m_please_fill_data + "  Transaction Date");	return false;}
		if(valueDate == "")   		{ alert(m_please_fill_data + "  Value Date");		return false;}
		if(amount == "") 			{ alert(m_please_fill_data + "  Amount"); 			return false;}
		if(referanceNo == "")   	{ alert(m_please_fill_data + "  Referance No");   	return false;}

		var valueTime = (toDate(valueDate)).getTime();
		var transTime = (toDate(transactionDate)).getTime();

		if(valueTime < transTime) {alert(m_value_trans_date); return false;}
		
		return true;
	}
	
	function openSavePopup(){
	
		jQuery("#saveDiv").show();
		jQuery("#updateDiv").hide();
		jQuery("#tr_search_customer").show();
		g_reset_case = "save";
		resetPopupFunction();
		openPopup("fancyPopup",function(){
	    });
	}
	
	function openUpdatePopup(data){
		jQuery("#saveDiv").hide();
		jQuery("#updateDiv").show();
		jQuery("#tr_search_customer").hide();
		g_data 			= data;
		g_reset_case 	= "update";
		resetPopupFunction();
		
		openPopup("fancyPopup",function(){
	    });
		
	}
	
	function resetPopupFunction(){
	
		if(g_reset_case == "save") {
			jQuery("[name=depositWithdraw][value=D]").click();
			jQuery("#cifNo").val("");
			jQuery("#customerName").val("");
			jQuery("#marginAccNo").val("");
			jQuery("#marginAccName").val("");
			jQuery("#transactionDate").val(getCurrentDate());
			jQuery("#valueDate").val(getCurrentDate());
			jQuery("#amount").val("");
			jQuery("#referanceNo").val("");
			jQuery("#updateBy").val(jQuery("#userLoginName").val());
			jQuery("#updateDate").val(getCurrentDate());

			setMarginAccNoFormat("cTfMarginAccNo","marginAccNo");
			setMarginAccNoFormat("tfMarginAccNo","marginAccNo");
		} else if (g_reset_case == "update") {
			var data = g_data;
			jQuery("[name=depositWithdraw][value=" + data.depositWithdrawId + "]").click();
			jQuery("#id").val(data.id);
			jQuery("#cifNo").val(data.cifNo);
			jQuery("#customerName").val(data.customerName);
			jQuery("#marginAccNo").val(data.marginAccNo);
			jQuery("#marginAccName").val(data.marginAccName);
			jQuery("#transactionDate").val(data.transactionDate);
			jQuery("#valueDate").val(data.valueDate);
			jQuery("#amount").val(addCommas(data.amount));
			jQuery("#referanceNo").val(data.referanceNo);
			jQuery("#updateBy").val(data.updateBy);
			jQuery("#updateDate").val(data.updateDate);
			jQuery("#rowVersion").val(data.rowVersion);
			
			setMarginAccNoFormat("tfMarginAccNo","marginAccNo");
		}
		
	}
	
	function resetFunction(){
		loading();
		jQuery("#action").val("init");
		submitform();
	}
	
	function search(){
		updateMarginAccNoValue("cTfMarginAccNo","marginAccNo");
		loading();
		jQuery("#action").val("search");
		submitform();
	}
	
	function onChangeDepositWithDraw(i_value){
		var data = g_data;
	
		if(i_value == "D"){
			if(g_reset_case == "save"){
				jQuery("#transactionDate").val(getCurrentDate());
				jQuery("#valueDate").val(getCurrentDate());
			}else if(g_reset_case == "update"){
				jQuery("#valueDate").val(data.valueDate);
			}
				
			
		} else if (i_value == "W"){
			var cur 		= new Date();

			if(g_reset_case == "save"){
				jQuery("#transactionDate").val(getCurrentDate());
			}else if(g_reset_case == "update"){
				var sprt = data.valueDate.split("/");
				
				cur.setDate(sprt[0]);
				cur.setMonth(parseInt(sprt[1],10)-1);
				cur.setYear(sprt[2]);
			}
			
			if(cur.getUTCDay() == 5){
				var nextThreeDay = new Date(cur.getTime() + 24 * 60 * 60 * 1000 * 3);
				var date_str	= ('0'+nextThreeDay .getDate()).substr(-2,2)+'/'+(1+nextThreeDay .getMonth() + '').substr(-2,2)+'/'+(nextThreeDay .getFullYear());

				if(g_reset_case == "save"){
					jQuery("#valueDate").val(date_str);
				}else if(g_reset_case == "update"){
					if(data.depositWithdrawId != 'W'){
						jQuery("#valueDate").val(date_str);
					}
				}
				
			} else {
				if(g_reset_case == "save"){
					jQuery("#valueDate").val(getTomorrow());
				}else if(g_reset_case == "update"){
					if(data.depositWithdrawId != 'W'){
						var nextDay = new Date(cur.getTime() + 24 * 60 * 60 * 1000 * 1);
						var date_str	= ('0'+nextDay .getDate()).substr(-2,2)+'/'+(1+nextDay .getMonth() + '').substr(-2,2)+'/'+(nextDay .getFullYear());
						jQuery("#valueDate").val(date_str);
					}
				}
			}
			
			
		}
	}
	
	function deleteDeposit(data){
		jQuery("#deleteId").val(data.id);
		jQuery("#action").val("delete");
	
		var del = confirm(m_do_delete);
	
		if(del == true){
			loading();
			 submitform();
		}
		else return;	
	}


	//for popup customer //

	function onPopup(id, src, width, height){
		g_datacustomer = null;
		jQuery("#" + id + "_iframe").html("");
		src = "http://" + window.location.host + "/FxMargin/" + src + ".do?pAction=init";
		var html = "<center><iframe src='" + src +"' height='" + height +"px' width='" + width + "px' id='myIframe'></iframe></center>";

		jQuery("#" + id + "_iframe").html(html);

		openPopup(id);
		
	}

	function select(data){
		g_datacustomer = data;
	}
	
	function onCustomer(){
		/*	global variable 'g_datacustomer' is use	*/
	
		if(g_datacustomer != null) {
			jQuery("#custInfoId").val(g_datacustomer.id);
			jQuery("#cifNo").val(g_datacustomer.cifNo);
			jQuery("#customerName").val(g_datacustomer.customerName);
			jQuery("#tfMarginAccNo").val(g_datacustomer.marginAccNo);
			jQuery("#marginAccName").val(g_datacustomer.marginAccName);

			openPopup("fancyPopup",function(){
				jQuery("#cifNo").focus();
				jQuery("#customerName").focus();
				jQuery("#tfMarginAccNo").focus();
				jQuery("#marginAccName").focus();
			});
		}
		
	}
	
	function offCustomer(){
		openPopup("fancyPopup",function(){});
	}
	// for popup customer //

	function onChangeAmount(value){
		var maxvalue 	= 9999999999999.99;
		var result 		= removeCommas(value); 
		if(result == "." || result == "" ) result = 0; 
		result = parseFloat(result);
		
		if(result > maxvalue) result = maxvalue;
		
		jQuery("#amount").val(addCommas(result.toFixed(2)));
	}
	
	function isAmount(event, value) {
		
		if((Math.floor(value) + "").length < 13){
			if(event.keyCode > 47 && event.keyCode < 58 ){return true; } 
			else if(event.keyCode == 46 ) { return true;}
		}
		event.returnValue = false;
	}

	function setMarginAccNoFormat(strTf,strHd){
		var tfMarginAccNo = document.getElementById(strTf);
		var marginAccNo = document.getElementById(strHd);
		var tmp = marginAccNo.value;
		var result = null;
		
		if(tmp != ""){
			tmp = marginAccNo.value.replace(/-/g,"");
			tmp = lpad(tmp,10,"0");

			result = "";
			for(var i=0; i<tmp.length; i++){
				if(i==3 || i==4 || i==9){
					result += "-" +tmp.charAt(i);
				}else{
					result += tmp.charAt(i);
				}
			}
		
		}else{
			result = "";
		}
		
		tfMarginAccNo.value = result;
	}

 	function updateMarginAccNoValue(strTf,strHd){
		var tfMarginAccNo = document.getElementById(strTf);
		var marginAccNo = document.getElementById(strHd);
		var result = tfMarginAccNo.value.replace(/-/g,"");

		if(!isNaN(result) && result != ""){
			result = parseInt(result,10);
		}else{
			result = "";
		}
		marginAccNo.value = result;
	}

</script>
</head>
<body>

<%@ include	file="include/headerMenu.jsp"%>

<center>
	<div style="width:95%" align="center">
		<html:form action="/DepositWithdrawAction.do">
			<html:hidden property="action" styleId="action"/>
			<html:hidden property="deleteId" styleId="deleteId"/>
		
			<table width="100%" class="MarginHeader">
				<tr>
					<td align="left">Deposit/Withdraw FX Margin A/C</td>
				</tr>
			</table>   
			
			<div class="CriteriaBox">
				<table width="100%" class="MarginCriteria">  
					<tr>
						<td width="50%" align="right">CIF No. :</td>    
						<td width="50%" align="left" ><html:text property="cifNo"></html:text></td>
					</tr>
					<tr>
						<td width="50%" align="right">Customer Name :</td>
						<td width="50%" align="left" ><html:text property="customerName"></html:text></td>
					</tr>	
					<tr>
						<td width="50%" align="right">Margin A/C No. :</td>
						<td width="50%" align="left" >
							<input type="text" id="cTfMarginAccNo" maxlength="13" onBlur="updateMarginAccNoValue('cTfMarginAccNo','marginAccNo');setMarginAccNoFormat('cTfMarginAccNo','marginAccNo');"/>
							<html:hidden property="marginAccNo" styleId="marginAccNo"/>
						</td>
					</tr>
					<tr>
						<td width="50%" align="right">Margin A/C Name :</td>
						<td width="50%" align="left" ><html:text property="marginAccName"></html:text></td>
					</tr>
					<tr>
						<td width="50%" align="right">Trans. Date :</td>
						<td width="50%" align="left" ><html:text property="transactionDate" styleId="transDate"></html:text></td>
					</tr>
				</table>
				
				<table width="100%" class="MarginCriteria">
					<tr>
						<td width="100%" align="center">
							<input type="button" value="Search" class="button" onclick="search();"/>
							&nbsp;&nbsp;
							<input type="button" value="Reset" class="button" onclick="resetFunction();"/>
							&nbsp;&nbsp;
							<input type="button" value="New" class="button" onclick="openSavePopup();"/>
						</td>
					</tr>
				</table>
			</div>
			
			<logic:present name="<%=Constant.SHOW_RESULT%>">			
			            
				<div class="MarginTable" >
					<display:table id="data" name="sessionScope.DepositWithdrawActionForm.depositWithdrawList" requestURI="/DepositWithdrawAction.do" pagesize="10" >
			
						<display:column property="rowNum"			title="No" sortable="false" class="center"/>
						<display:column property="cifNo"   			title="CIF No."   sortable="false" class="center"/>
						<display:column property="customerName" 	title="Customer Name" sortable="false" class="left"/>			
						<display:column property="marginAccNo" 		title="Margin A/C No." sortable="false" class="center"/>
						<display:column property="marginAccName"   	title="Margin A/C Name"   sortable="false" class="left"/>
						<display:column property="transactionDate" 	title="Trans. Date" sortable="false" class="center"/>			
						<display:column property="depositWithdraw" 	title="Deposit/Withdraw" sortable="false" class="center"/>
						<display:column property="amount"   		title="Amount (THB)"   sortable="false" class="right" format="{0,number,#,##0.00}"/>
						<display:column property="referanceNo" 		title="Referance No." sortable="false" class="left"/>			
						<display:column property="updateBy" 		title="Update By" sortable="false" class="left"/>
						<display:column title="Edit" sortable="false" class="center">
							<img src="jsp/images/edit.png" alt="Edit" style="width:30px;cursor:pointer;" onclick="openUpdatePopup({${data.jsonObject}});"/>
						</display:column>
						<display:column title="Delete" sortable="false" class="center">
							<img src="jsp/images/delete.png" alt="Delete" style="width:30px;cursor:pointer;" onclick="deleteDeposit({${data.jsonObject}});"/>
						</display:column>
					</display:table>
				</div>
				
			</logic:present>


			<div style="display:none">
		        <div id="fancyPopup" style="width:450px">
		        	<input type="hidden" id="id" value=""/>
		        	<input type="hidden" id="rowVersion" value="0"/>
		        	<input type="hidden" id="custInfoId" value=""/>
		        	<table width="100%" class="MarginHeader">
						<tr>
							<td align="left">Deposit/Withdraw FX Margin A/C</td>
						</tr>
					</table>
		            <table width="100%" class="MarginCriteria">
						<tr>
							<td colspan="2" align="left">Deposit/Withdraw FX Margin A/C</td>
						</tr>
						<tr id="tr_search_customer">
							<td width="50%" align="right"></td>
							<td width="50%" align="left" ><input type="image" src="jsp/images/btn/glass_search.gif" style="width:30px;cursor:pointer;" onclick="onPopup('popupCustomer','PopupCustomerAction',700,540);" /></td>
						</tr>
						<tr>
							<td width="50%" align="right">CIF No. :</td>
							<td width="50%" align="left" ><input type="text" id="cifNo" readonly="readonly" class="disabled"/></td>
						</tr>              
						<tr>
							<td width="50%" align="right">Customer Name :</td>
							<td width="50%" align="left" ><input type="text" id="customerName" readonly="readonly" class="disabled"/></td>
						</tr>	
						<tr>
							<td width="50%" align="right">Margin A/C No. :</td>
							<td width="50%" align="left" >
								<input type="text" id="tfMarginAccNo" readonly="readonly" class="disabled"/>
							</td>
						</tr>
						<tr>
							<td width="50%" align="right">Margin A/C Name :</td>
							<td width="50%" align="left" ><input type="text" id="marginAccName" readonly="readonly" class="disabled"/></td>
						</tr>	
						<tr>
							<td width="50%" align="right">Transaction Date :</td>
							<td width="50%" align="left" ><input type="text" id="transactionDate" readonly="readonly" class="disabled"/></td>
						</tr>
						<tr>
							<td width="50%" align="right">Value Date :</td>
							<td width="50%" align="left" ><input type="text" id="valueDate" readonly="readonly"/></td>
						</tr>
						<tr>
							<td width="50%" align="right">Deposit/Withdraw :</td>
							<td width="50%" align="left" >
								<input type="radio" name="depositWithdraw" id="deposit"  value="D" onchange="onChangeDepositWithDraw('D');"/> Deposit &nbsp;&nbsp;
								<input type="radio" name="depositWithdraw" id="withdraw" value="W" onchange="onChangeDepositWithDraw('W');"/> Withdraw
							</td>
						</tr>	
						<tr>
							<td width="50%" align="right"><font color="red">* </font>Amount(THB) :</td>
							<td width="50%" align="left" ><input type="text" id="amount" onkeypress="return isFloat(event ,this.value);" onchange="onChangeAmount(this.value);" maxlength="20"></td>
						</tr>
						<tr>
							<td width="50%" align="right"><font color="red">* </font>Referance No. :</td>
							<td width="50%" align="left" ><input type="text" id="referanceNo" maxlength="40"/></td>
						</tr>	
						<tr>
							<td width="50%" align="right">Update By :</td>
							<td width="50%" align="left" ><input type="text" id="updateBy" readonly="readonly" class="disabled"/></td>
						</tr>
						<tr>
							<td width="50%" align="right">Update Date :</td>
							<td width="50%" align="left" ><input type="text" id="updateDate" readonly="readonly" class="disabled"/></td>
						</tr>			
					</table>
					<table width="100%">
						<tr>
							<td width="33%" align="center">
								<div id="saveDiv"><input type="button" value="Save" class="button" id="save" onclick="saveFunction();"/></div>
								<div id="updateDiv"><input type="button" value="Save" class="button" id="update" onclick="updateFunction();"/></div>
							</td>
							<td width="33%" align="center"><input type="button" value="Reset" class="button" onclick="resetPopupFunction();"/></td>
							<td width="34%" align="center"><input type="button" value="Close" class="button" onclick="$.fancybox.close();"/></td>
						</tr>
					</table>
		            
		        </div>
		    </div>
	    
		    <div style="display:none">
		        <div id="popupCustomer" style="width:710px;height: 600px">
		        	<div id="popupCustomer_iframe"></div>
					<table width="100%">
						<tr>
							<td width="33%" align="center">
								<input type="button" value="Ok" class="button" onclick="onCustomer();"/>
							</td>
							<td width="34%" align="center">
								<input type="button" value="Close" class="button" onclick="offCustomer();"/>
							</td>
						</tr>
					</table>
		        </div>
		    </div>
		    
		    <%@ include	file="include/footer.jsp"%> 
			<%@ include	file="include/message.jsp"%> 
		</html:form>	
		
	</div>
</center>

</body>
</html>